let $ = layui.$;
var layer = layui.layer //弹层
    , laypage = layui.laypage //分页
    , laydate = layui.laydate //日期
    , table = layui.table //表格
    , form = layui.form

export default class HitMovies {
    constructor() {
        this.render()
        this.handel()

    }
    render() {
        let template = `
        <h1 style="padding: 15px;">即将上映</h1>
        <div style="display:flex">
            <div class="layui-btn-group">
            <button type="button" id="addBtn" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
        </button>
            </div>
            <form class="layui-form layui-form-pane" action="" lay-filter="searchForm">
            <div class="layui-form-item">
                <label class="layui-form-label">search</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required" lay-search="" style="width: 50px;">
                        <option value="">全部</option>
                        <option value="name">电影中文名</option>
                        <option value="ename">英文名</option>
                        <option value="type">类型</option>
                        <option value="area">上映地区</option>
                        <option value="time">电影时长</option>
                        <option value="upDate">上映时间</option>
                        <option value="year">年代</option>
                        <option value="score">评分</option>
                        <option value="count">票房</option>
                        <option value="want">想看人数</option>
                        <option value="director">导演</option>
                        <option value="actor">演员</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                <input type="text" 
                name="value" required 
                lay-verify="required"
                placeholder="请输入标题" 
                autocomplete="off" 
                class="layui-input"  style="width:200px"> 
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="searchBtn" style="margin-left:80px">搜索</button>
                </div>
            </div>
        </form>
        </div>

         <table id="test" lay-filter="test">

         </table>
         <script type="text/html" id="barDemo">
         <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">移除</a>
         </script>
    `
        $('#content').html(template)
    };
    handel() {
        // 渲染表格
        form.render()
        table.render({
            elem: '#test'
            , url: '/api/films/all' //数据接口
            // ,width:1250
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , limits: [3, 5, 10, 15, 20]
                , limit: 5
            } //开启分页
            , cols: [[ //表头
                { field: 'name', title: '电影名', width: 150, fixed: 'left' }
                , { field: 'ename', title: '英文名', width: 150 }
                , { field: 'type', title: '电影类型', sort: true, width: 150 }
                , { field: 'area', title: '上映地区', width: 150 }
                , { field: 'time', title: '电影时长', sort: true, width: 150 }
                , { field: 'upDate', title: '上映时间', width: 150 }
                , { field: 'year', title: '年代', sort: true, width: 150 }
                , { field: 'score', title: '电影评分', sort: true, width: 150 }
                , { field: 'count', title: '电影票房', sort: true, width: 150 }
                , { field: 'want', title: '想看人数', sort: true, width: 150 }
                , { field: 'intro', title: '剧情简介', width: 150 }
                , {
                    field: 'director', title: '导演', width: 150, templet: function (d) {
                        return d.director[0] ? d.director[0] : '';
                    }
                }
                , { fixed: 'right', title: '操作', width: 178, align: 'center', toolbar: '#barDemo' }
            ]]
            , parseData: function (res) { //res 即为原始返回的数据
                // console.log(res);
                let result = res.filter(item => item.status == 3)
                console.log(res);
                console.log(result);

                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": result.length, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }

        });
        // 移出事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            console.log(data._id);
            if (obj.event === 'del') {
                layer.confirm('真的移出嘛', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        type: "put",
                        url: "/api/films/" + data._id,
                        data: { status: 0 },
                        success: (res) => {
                            console.log(res);

                        }
                    })
                });

            }
        });
        //   渲染弹出层
        $("#addBtn").click(function () {
            let info = []
            layer.open({
                type: 1
                , title: false //不显示标题栏
                , area: ['800px', '500px']
                , shade: 0.8
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , anim: 5
                , btnAlign: 'c'
                , btn: ['取消']
                , moveType: 1 //拖拽模式，0或者1
                , content: `  
                
                <form class="layui-form layui-form-pane" action="" lay-filter="searchForms">
                <div class="layui-form-item">
                    <label class="layui-form-label">search</label>
                    <div class="layui-input-inline">
                        <select name="type" lay-verify="required" lay-search="" style="width:80px;height:37px;border:none;">
                            <option value="">全部</option>
                            <option value="name">电影中文名</option>
                            <option value="ename">英文名</option>
                            <option value="type">类型</option>
                            <option value="area">上映地区</option>
                            <option value="time">电影时长</option>
                            <option value="upDate">上映时间</option>
                            <option value="year">年代</option>
                            <option value="score">评分</option>
                            <option value="count">票房</option>
                            <option value="want">想看人数</option>
                            <option value="director">导演</option>
                            <option value="actor">演员</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                    <input type="text" 
                    name="value" required 
                    lay-verify="required"
                    placeholder="请输入标题" 
                    autocomplete="off" 
                    class="layui-input" style="width:200px"> 
                    </div>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="searchBtns" style="margin-left:80px">搜索</button>
                    </div>
                </div>
            </form>
                    <table id="demo" lay-filter="tests">
                    </table>
                   <div>
                        <button type="button" class="layui-btn" id="addBtns" style="">
                        <i class="layui-icon">&#xe608;</i> 确认添加
                        </button>
                    </div>
          `
                ,
                end() { }
                , success() {
                    form.render()
                }
            });


            table.render({
                elem: '#demo'
                , url: '/api/films/all' //数据接口
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 6 //只显示 5 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                    , limits: [3, 5, 10, 15, 20]
                    , limit: 5
                }, toolbar: ['filter', 'print', 'exports', {
                    title: '提示' //标题
                    , layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-tips' //图标类名
                }]
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'name', title: '电影名', width: 150, fixed: 'left' }
                    , { field: 'ename', title: '英文名', width: 150 }
                    , { field: 'type', title: '电影类型', sort: true, width: 150 }
                    , { field: 'area', title: '上映地区', width: 150 }
                    , { field: 'time', title: '电影时长', sort: true, width: 150 }
                    , { field: 'upDate', title: '上映时间', width: 150 }
                    , { field: 'year', title: '年代', sort: true, width: 150 }
                    , { field: 'score', title: '电影评分', sort: true, width: 150 }
                    , { field: 'count', title: '电影票房', sort: true, width: 150 }
                    , { field: 'want', title: '想看人数', sort: true, width: 150 }
                    , { field: 'intro', title: '剧情简介', width: 150 }
                    , {
                        field: 'director', title: '导演', width: 150, templet: function (d) {
                            return d.director[0] ? d.director[0] : '';
                        }
                    }
                    , { field: 'actor', title: '演员', width: 150 }
                    , { fixed: 'right', title: '操作', width: 178, align: 'center', toolbar: '#barDemo' }
                ]]
                , parseData: function (res) { //res 即为原始返回的数据
                    let arr = res.filter(item => item.status == 0)
                    console.log(arr);
                    return {
                        "code": 0, //解析接口状态
                        "msg": '', //解析提示文本
                        "count": arr.length, //解析数据长度
                        "data": arr //解析数据列表
                    };
                }
                , request: {
                    pageName: 'current' //页码的参数名称，默认：page
                    , limitName: 'size' //每页数据量的参数名，默认：limit
                }
            });
            //监听头工具栏事件
            table.on('checkbox(tests)', function (obj) {
                // console.log(obj.checked); //当前是否选中状态
                // console.log(obj.data); //选中行的相关数据
                // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
                if (obj.type == "all" && obj.checked == true) {
                    let arr;
                    // console.log(1);
                    $("#addBtns").click(function () {
                        // console.log("addBtn");
                        $.ajax({
                            type: "get",
                            url: "/api/films/all",
                            success: (res) => {
                                arr = res.filter(item => item.status == 0)
                                for (let item of arr) {
                                    $.ajax({
                                        type: "put",
                                        url: "/api/films/" + item._id,
                                        data: { status: 3 },
                                        success: (res) => {
                                            console.log(res);
                                            table.reload('demo');
                                            table.reload('test');

                                        }
                                    })
                                }

                            }
                        })

                    })
                } else {
                    let arrs
                    info.push(obj.data)
                    console.log(info);
                    arrs = info.filter(item => item.status == 0)
                    console.log(arrs);
                    $("#addBtns").click(function () {
                        console.log(123);
                        for (let index of arrs) {
                            $.ajax({
                                type: "put",
                                url: "/api/films/" + index._id,
                                data: { status: 3 },
                                success: (res) => {
                                    console.log(res);
                                    table.reload('demo');
                                    table.reload('test');
                                }
                            })
                        }
                    })
                }
            });
            $('#searchBtns').click(function () {
                let type = form.val('searchForms').type;
                let value = form.val('searchForms').value;
                // console.log(form.val('searchForm'));
                table.reload('demo', {
                    where: form.val('searchForms'),
                    page: {
                        curr: 1
                    }
                })


            })

        });
        // 搜索
        $('#searchBtn').click(function () {
            let type = form.val('searchForm').type;
            let value = form.val('searchForm').value;
            // console.log(form.val('searchForm'));
            table.reload('test', {
                where: form.val('searchForm'),
                page: {
                    curr: 1
                }
            })


        })


    }
}